import React, { Component } from 'react';
import $ from 'jquery';

import "./input.css";

export default class extends Component {
  render () {
    return (
      <div style={{
        textAlign: "left"
      }} className={"form-item register-item" + (this.props.hasError === true ? " form-item-error" : "")}>
        <input style={{
          width: "406px",
          height: "44px",
          border: "#e3e3e3 1px solid",
          fontSize: "16px",
          borderRadius: "2px",
          padding: "0 18px",
          lineHeight: "44px",
          outline: "none"
        }}
          className="reg-item"
          id={this.props.id}
          maxLength={this.props.maxLength}
          placeholder={this.props.placeholder}
          tabIndex="1"
          type={this.props.type}
          value={this.props.value}
          onFocus={() => {
            $("#" + this.props.id + "-normal-tips").css("display", "inline-block");
            this.props.onFocus();
          }}
          onChange={this.props.onChange}
          onBlur={() => {
            $("#" + this.props.id + "-normal-tips").css("display", "none");
            this.props.onBlur();
          }} />
        <span id={this.props.id + "-error-tips"} className="error-tips" style={{ display: this.props.hasError ? "inline-block" : "none", color: "#fe2626" }}>{this.props.errorTips}</span>
        <span id={this.props.id + "-normal-tips"} className="normal-tips" style={{ display: "none", color: "#999" }} dangerouslySetInnerHTML={{ __html: this.props.normalMsg }}></span>
      </div>
    );
  }
}